<template>
  <el-container class="layout-container-demo" style="width: 100%;height: 900px;overflow:hidden">

    <el-aside width="200px">
      <img src="../assets/logo.png" alt="Vue logo" style="width: 100%;height: auto" >
      <el-scrollbar>
        <el-menu  :unique-opened="true">
          <el-menu-item index="3-3" @click="yb"><el-icon><odometer /></el-icon>仪表盘</el-menu-item>

          <el-sub-menu index="1">
            <template #title>
              <el-icon><icon-menu /></el-icon>常用设置
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1" @click="a1">教师管理</el-menu-item>
              <el-menu-item index="1-2" @click="a2">学生管理</el-menu-item>
              <el-menu-item index="1-3" @click="a3">公告管理</el-menu-item>
              <el-menu-item index="1-4" @click="a4">系统配置</el-menu-item>
              <el-menu-item index="1-5" @click="a5">判题服务器</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <el-sub-menu index="2">
            <template #title>
              <el-icon><aim /></el-icon>问题
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1" @click="b1">问题列表</el-menu-item>
              <el-menu-item index="2-2" @click="b2">增加题目</el-menu-item>
              <el-menu-item index="2-3" @click="b3">导入导出题目</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <el-sub-menu index="3">
            <template #title>
              <el-icon><trophy /></el-icon>比赛&练习
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1" @click="c1">比赛列表</el-menu-item>
              <el-menu-item index="3-2" @click="c2">创建比赛</el-menu-item>
            </el-menu-item-group>

          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>
              <el-icon><collection /></el-icon>课程
            </template>
            <el-menu-item-group>
              <el-menu-item index="4-1" @click="d1">课程列表</el-menu-item>
              <el-menu-item index="4-2" @click="d2">创建课程</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <div class="toolbar">
          <el-icon><search /></el-icon>
          <el-icon style="margin-left: 10px;margin-right: 20px"><share /></el-icon>
          <el-dropdown>
            <el-icon style="margin-right: 8px; margin-top: 1px;margin-left: 10px"
            >username</el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>logout</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

        </div>
      </el-header>

      <el-main>
        <router-view></router-view>
      </el-main>
      <el-footer class="footer">Build Version 20210929bd</el-footer>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "FirstHello",
  methods:{
    yb(){
      this.$router.push("/yiBiaoPang")
    },
    a1(){
      this.$router.push("/teacherManage")
    },
    a2(){
      this.$router.push("/index1-2")
    },
    a3(){
      this.$router.push("/index1-3")
    },
    a4(){
      this.$router.push("/index1-4")
    },
    a5(){
      this.$router.push("/index1-5")
    },
    b1(){
      this.$router.push("/index2-1")
    },
    b2(){
      this.$router.push("/index2-2")
    },
    b3(){
      this.$router.push("/index2-3")
    },
    c1(){
      this.$router.push("/index3-1")
    },
    c2(){
      this.$router.push("/index3-2")
    },
    d1(){
      this.$router.push("/index4-1")
    },
    d2(){
      this.$router.push("/index4-2")
    },



  }

}
</script>

<script  setup>
import { ref } from 'vue'
import { Menu as IconMenu, Message, Setting,Odometer ,Aim,Trophy ,Collection,Search,Share  } from '@element-plus/icons-vue'


const item = {
  date: '2016-05-02',
  name: 'Tom',
  address: 'No. 189, Grove St, Los Angeles',
  methods:{
    a1(){
      this.$router.push("/teacherManage")
    }
  }
}
const tableData = ref(Array.from({ length: 20 }).fill(item))
</script>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: #F9FAFC;
  color: var(--el-text-color-primary);
}
.layout-container-demo .footer {
  position: relative;
  background-color: #EDECEC;
  text-align: center;
  line-height: 60px;
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  /*background: var(--el-color-primary-light-8);*/
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  background-color: #EDECEC;
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;height: 0;
}
.router-link-active {
  text-decoration: none;
}
.router-link{
  text-decoration: none;
}
</style>
